<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>日志信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" lay-filter="table-search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择区服:</label>
                            <div class="layui-input-inline">
                                <select name="gameArea" class="layui-select">
                                    <option v-for="(item,index) in services" :value="item.server_id" :selected="index==0">{{item.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">长ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="customerId" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">角色ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="id" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nick" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">记录类型</label>
                            <div class="layui-input-inline">
                                <select name="logType" class="layui-select">
                                    <option value="">全部</option>
                                    <option value="道具改变">道具改变</option>
                                    <option value="经验改变">经验改变</option>
                                    <option value="货币改变">货币改变</option>
                                    <option value="场景改变">场景改变</option>
                                    <option value="等级改变">等级改变</option>
                                    <option value="其它改变">其它改变</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createTimeBegin" id="createTime0" placeholder="开始时间" autocomplete="off" class="layui-input" />
                                <input type="text" name="createTimeEnd" id="createTime1" placeholder="截止时间" autocomplete="off" class="layui-input" />
                            </div>
                            <div class="layui-input-inline" style="width:auto;">
                                <button type="button" class="layui-btn layui-btn-xs" id="btn-today">今日</button>
                                <button type="button" class="layui-btn layui-btn-xs" id="btn-yesterday">昨日</button>
                                <button type="button" class="layui-btn layui-btn-xs" id="btn-7days">近7日</button>
                                <button type="button" class="layui-btn layui-btn-xs" id="btn-30days">近30日</button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                        <div class="layui-inline" style="float:right;">
                            <button type="button" class="layui-btn layui-btn-primary" @click="exportData">导出数据</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <div style="margin-top:24px;">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>所在区域</th>
                        <th>记录类型</th>
                        <th>玩家操作</th>
                        <th>玩家操作</th>
                        <th>道具名称</th>
                        <th>原有数量</th>
                        <th>改变值</th>
                        <th>当前数量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="row in tableData" :key="row.id">
                        <td>{{ getYMDHMS(row.createTime) }}</td>
                        <td>{{ row.area }}</td>
                        <td>{{ row.logType }}</td>
                        <td>{{ row.action1 }}</td>
                        <td>{{ row.action2 }}</td>
                        <td><a v-if="row.itemUrl" :href="row.itemUrl" target="_blank" style="color:#1E9FFF;">{{ row.itemName }}</a><span v-else>{{ row.itemName }}</span></td>
                        <td>{{ row.oldNum }}</td>
                        <td>{{ row.changeNum }}</td>
                        <td>{{ row.nowNum }}</td>
                    </tr>
                    <tr v-if="tableData.length === 0">
                        <td colspan="9" style="text-align:center;">暂无数据</td>
                    </tr>
                </tbody>
            </table>
            <div id="pagination"></div>
        </div>
    </div>
</div>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<script src="/js/common.js?v=5" charset="utf-8"></script>
<script src="/js/vue.min.js"></script>
<script>
    // 通用日期格式化
    function getYmd(offset) {
        var d = new Date();
        d.setDate(d.getDate() + (offset || 0));
        var m = d.getMonth() + 1;
        var day = d.getDate();
        return d.getFullYear() + '-' + (m < 10 ? '0' + m : m) + '-' + (day < 10 ? '0' + day : day);
    }
    function getYMDHMS(ts) {
        if (!ts) return '';
        var d = new Date(ts * 1000);
        var m = d.getMonth() + 1;
        var day = d.getDate();
        var h = d.getHours();
        var min = d.getMinutes();
        var s = d.getSeconds();
        return d.getFullYear() + '-' + (m < 10 ? '0' + m : m) + '-' + (day < 10 ? '0' + day : day) + ' ' +
            (h < 10 ? '0' + h : h) + ':' + (min < 10 ? '0' + min : min) + ':' + (s < 10 ? '0' + s : s);
    }
    new Vue({
        el: "#app",
        data: {
            services: JSON.parse(localStorage.getItem('services')),
            tableData: [],
            total: 0,
            page: 1,
            limit: 15,
            lastQuery: {}
        },
        methods: {
            fetchData(params, page = 1) {
                var _this = this;
                var query = Object.assign({}, params || {}, { page: page, limit: this.limit });
                $.get('/admin/gameRole/logs', query, function(res) {
                    if (res.code === 0) {
                        _this.tableData = (res.data && res.data.list) ? res.data.list : [];
                        _this.total = (res.data && res.data.total) ? res.data.total : 0;
                        _this.renderPage(query);
                    } else {
                        layer.msg(res.msg || '查询失败', {icon: 2});
                    }
                });
            },
            renderPage(query) {
                var _this = this;
                layui.use('laypage', function() {
                    layui.laypage.render({
                        elem: 'pagination',
                        count: _this.total,
                        limit: _this.limit,
                        curr: _this.page,
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                        jump: function(obj, first) {
                            if (!first) {
                                _this.page = obj.curr;
                                _this.limit = obj.limit;
                                _this.fetchData(query, obj.curr);
                            }
                        }
                    });
                });
            },
            exportData() {
                var searchData = Object.assign({}, this.lastQuery);
                searchData.page = 1;
                searchData.limit = 9999999;
                asyncDownload(
                    '/admin/gameRole/logs/export',
                    searchData,
                    {token:localStorage.getItem('adminToken')}
                );
            }
        },
        mounted() {
            var _this = this;
            layui.use(['form', 'laydate'], function () {
                var form = layui.form;
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#createTime0',
                    value: getYmd(0) + ' 00:00:00'
                });
                laydate.render({
                    elem: '#createTime1',
                    value: getYmd(1) + ' 00:00:00'
                });
                // 快捷时间按钮
                $('#btn-today').on('click', function() {
                    var today = getYmd(0);
                    $('[name=createTimeBegin]').val(today + ' 00:00:00');
                    $('[name=createTimeEnd]').val(today + ' 23:59:59');
                });
                $('#btn-yesterday').on('click', function() {
                    var yest = getYmd(-1);
                    $('[name=createTimeBegin]').val(yest + ' 00:00:00');
                    $('[name=createTimeEnd]').val(yest + ' 23:59:59');
                });
                $('#btn-7days').on('click', function() {
                    var start = getYmd(-6);
                    var end = getYmd(0);
                    $('[name=createTimeBegin]').val(start + ' 00:00:00');
                    $('[name=createTimeEnd]').val(end + ' 23:59:59');
                });
                $('#btn-30days').on('click', function() {
                    var start = getYmd(-29);
                    var end = getYmd(0);
                    $('[name=createTimeBegin]').val(start + ' 00:00:00');
                    $('[name=createTimeEnd]').val(end + ' 23:59:59');
                });
                form.render();
                // 监听表单提交
                form.on('submit(data-search-btn)', function (data) {
                    _this.page = 1;
                    _this.lastQuery = data.field;
                    _this.fetchData(data.field, 1);
                    return false;
                });
                // 页面初次加载
                _this.fetchData({}, 1);
            });
        }
    });
</script>
</body>
</html>